<template>
	<div id="container">
		<el-header height="auto"></el-header>

		<el-container direction="horizontal">
			<el-main>
				<el-row :gutter="20">
					<el-col :span="16" :offset="4">
						<el-form label-width="100px" size="large" label-position='left' :inline="true">
							<el-form-item width="200px">
								<el-input placeholder="支持模糊查询" v-model="socialRelationshipInfo.staff_no">
									<template #prepend>
										<el-icon>
											<User />
										</el-icon>
										&nbsp;员工编号
									</template>
								</el-input>
							</el-form-item>

							<el-form-item>
								<span>
									<el-icon><Compass /></el-icon>
									关系&nbsp;
								</span>
								<el-select v-model="socialRelationshipInfo.foreign_languages">
									<el-option label="父亲" value="父亲"></el-option>
									<el-option label="母亲" value="母亲"></el-option>
									<el-option label="配偶" value="配偶"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item>
								<el-input placeholder="亲属或朋友的姓名,支持模糊查询" v-model="socialRelationshipInfo.name_of_family">
									<template #prepend>
										<el-icon><UserFilled /></el-icon>
										&nbsp;姓名
									</template>
								</el-input>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="search()">搜索</el-button>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>

				<el-row gutter="20">
					<el-col :span="16" :offset="4">
						<div id="search_result" v-if="isRouterAlive" style="padding: 10px;">
							<el-table :data="socialRelationshipInfos" border stripe style="width: auto" ref="multipleTable"
								:default-sort="{ prop: 'staff_no', order: '' }"
								@selection-change="handleSelectionChange" size="large">
								<el-table-column type="selection" width="55" v-if="true" />
								<el-table-column label="员工编号" sortable prop="staff_no" width="120">
									<template #default="scope">
										<div style="display: flex; align-items: center">
											<el-icon>
												<User />
											</el-icon>
											<span style="margin-left: 10px">{{ scope.row.staff_no }}</span>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="社会关系" prop="relationship"></el-table-column>
								<el-table-column label="亲属姓名" prop="name_of_family"></el-table-column>
								<el-table-column label="亲属所在单位名称" prop="department_of_family"></el-table-column>
								<el-table-column label="亲属职务" prop="position_of_family"></el-table-column>
								<el-table-column label="联系联系电话" prop="telephone_of_family"></el-table-column>

								<el-table-column label="操作">
									<template #default="scope">
										<el-button size="small" type="primary"
											@click="handleEdit(scope.$index, scope.row)">编辑
										</el-button>
										<el-button size="small" type="danger"
											@click="handleDelete(scope.$index, scope.row)">删除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-col>
				</el-row>

			</el-main>
		</el-container>

		<el-footer height="auto">
			<el-row :gutter="20">
				<el-col :span="6" :offset="18">
					<el-button size="large" type="primary" @click="toggleSelection()">清除选中</el-button>
					<el-button size="large" type="primary" icon="delete" class="handle-del mr10" @click="delAll()">批量删除
					</el-button>
				</el-col>
			</el-row>

			<!-- <div class="pagination">
				<el-row :gutter="20">
					<el-col :offset="9">
						<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="100"
							background class="mt-4">
						</el-pagination>
					</el-col>
				</el-row>
			</div> -->

			<!-- <div id="bottom">
				版权归东软教育所有
			</div> -->
		</el-footer>
	</div>
</template>

<script>
	export default {
		name: "SocialRelationshipSearchView",
		created() {
			this.search();
		},
		data() {
			return {
				socialRelationshipInfo: {
					staff_no: '',
					relationship: '',
					name_of_family: '',
					department_of_family: '',
					position_of_family: '',
					telephone_of_family: ''
				},
				socialRelationshipInfos: [],
				isRouterAlive: true,
				cur_page: 1,
				del_list: [],
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.cur_page = val;
				this.getData();
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach((row) => {
						// TODO: improvement typing when refactor table
						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
						// @ts-expect-error
						this.$refs.multipleTable.toggleRowSelection(row)
					})
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			formatter(row, column) {
				return row.address;
			},
			filterTag(value, row) {
				return row.tag === value;
			},
			handleEdit(index, row) {
				this.$message('编辑第' + (index + 1) + '行');
				let str = JSON.stringify(this.socialRelationshipInfos[index]);
				sessionStorage.setItem("socialRelationshipInfo", str);
				this.$router.push("/SocialRelationshipUpdate");
			},
			handleDelete(index, row) {
				this.$message.error('删除第' + (index + 1) + '行');
				this.del_list = this.del_list.concat(this.socialRelationshipInfos[index]);
				console.log(this.del_list);
				this.$axios.post("http://localhost:8088/eStaff/socialRelationshipInfo/infoDel", this.del_list)
					.then(rst => {
						if (rst.data.code == 200) {
							// this.$message("操作结束");
							this.$alert(rst.data.msg, "成功");
							this.$message.error('删除了' + str);
						} else {
							this.$alert(rst.data.msg, "失败");
						}
						console.log(rst.data);
					}).catch(err => {
						console.log(err);
					})

				this.del_list = [];

				this.search()
			},
			delAll() {
				const length = this.multipleSelection.length;
				let str = '';
				this.del_list = this.del_list.concat(this.multipleSelection);

				// console.log(this.del_list);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i] + ' ';
				}
				str = JSON.stringify(this.multipleSelection);
				console.log(str);

				this.$axios.post("http://localhost:8088/eStaff/socialRelationshipInfo/infoDel", this.del_list)
					.then(rst => {
						if (rst.data.code == 200) {
							// this.$message("操作结束");
							this.$alert(rst.data.msg, "成功");
							this.$message.error('删除了' + str);
						} else {
							this.$alert(rst.data.msg, "失败");
						}
						console.log(rst.data);
					}).catch(err => {
						console.log(err);
					})
				// this.$message.error('删除了' + str);

				// 重置选中内容
				this.multipleSelection = [];
				this.del_list = [];
				this.search();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection);
			},
			search() {
				let str = JSON.stringify(this.socialRelationshipInfo)
				console.log(str)
				this.$axios.post("http://localhost:8088/eStaff/socialRelationshipInfo/findInfo", this.socialRelationshipInfo)
					.then(rst => {
						console.log(rst.data);
						this.socialRelationshipInfos = rst.data.result;
					}).catch(err => {
						console.log(err);
					})
			},
		}
	}
</script>

<style scoped>
	#container {
		width: 100%;
		height: 100%;
		/* 弹性布局 */
		display: flex;
		/* 伸缩方向：列方向 */
		flex-direction: column;
		/* background-image: url("../../assets/image03.jpg"); */
		/* background-color: aliceblue; */
	}

	#top {
		width: 100%;
		height: 80px;
		border-bottom: 1px solid darkgray;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 20px;
		box-sizing: border-box;
	}

	#top #logo {
		font-size: 50px;
		font-family: 楷体;
		text-shadow: 5px 5px 5px gray;
		font-style: italic;
		font-weight: bolder;
	}

	#top #info {
		font-size: 12px;
	}

	#top a {
		text-decoration: none;
	}

	#search_result {
		height: 100%;
		padding: 10px;
	}

	#bottom {
		width: 100%;
		height: 30px;
		font-size: 12px;
		border-top: 1px solid darkgray;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
